<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body></body>

  <script>
    // LazyMan('Tony').eat('breakfast').sleep(3).eat('lunch').sleep(1).eat('dinner')
    // 输出:
    // Hi I am Tony
    // I am eating breakfast
    // 等待3秒...
    // I am eating lunch
    // 等待1秒...
    // I am eating dinner

    class LazyMan {
      constructor(name) {
        this.name = name
        // 任务队列，存储所有待执行的任务
        this.tasks = []

        // 将初始化任务添加到队列中
        this.tasks.push(() => {
          console.log(`Hi I am ${this.name}`)
          this.next() // 执行完当前任务后调用next()执行下一个任务
        })
        debugger
        // 使用setTimeout确保所有链式调用完成后再开始执行任务
        // 这样可以保证所有的eat()和sleep()方法都已经将任务添加到队列中
        setTimeout(() => {

          debugger
          console.log(111);
          
          this.next()
        }, 0)
      }

      // 吃东西的方法
      eat(food) {
        debugger
        // 将吃东西的任务添加到任务队列中
        this.tasks.push(() => {
          console.log(`I am eating ${food}`)
          this.next() // 执行完当前任务后继续执行下一个任务
        })
        // 返回this支持链式调用
        return this
      }

      // 睡眠的方法
      sleep(time) {
        debugger
        // 将睡眠任务添加到任务队列中
        this.tasks.push(() => {
          console.log(`等待${time}秒...`)
          // 使用setTimeout模拟睡眠，延迟指定时间后执行下一个任务
          setTimeout(() => {
            this.next()
          }, time * 1000) // 将秒转换为毫秒
        })
        // 返回this支持链式调用
        return this
      }

      // 执行下一个任务的方法
      next() {
        debugger
        // 从任务队列中取出第一个任务并执行
        const task = this.tasks.shift()
        if (task) {
          task() // 执行任务
        }
        // 如果队列为空，所有任务执行完毕
      }
    }

    // 测试代码：创建LazyMan实例并进行链式调用
    new LazyMan("Tony")
      .eat("breakfast")
      .sleep(3)
      .eat("lunch")
      .sleep(1)
      .eat("dinner")
  </script>
</html>
